<template>
  <div v-if="route" class="button-route">
    <el-form :model="route" inline label-width="40px">
      <el-form-item label="向左">
        <el-select
          v-model="route.left"
          clearable
          style="width: 130px"
          placeholder="请选择向左"
          @change="handleRouteChange($event, 'left')"
        >
          <el-option
            v-for="item of getOptions()"
            :key="item.id"
            :label="item.id"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="向右">
        <el-select
          v-model="route.right"
          clearable
          style="width: 130px"
          placeholder="请选择向右"
          @change="handleRouteChange($event, 'right')"
        >
          <el-option
            v-for="item of getOptions()"
            :key="item.id"
            :label="item.id"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="向上">
        <el-select
          v-model="route.up"
          clearable
          style="width: 130px"
          placeholder="请选择向上"
          @change="handleRouteChange($event, 'up')"
        >
          <el-option
            v-for="item of getOptions()"
            :key="item.id"
            :label="item.id"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="向下">
        <el-select
          v-model="route.down"
          clearable
          style="width: 130px"
          placeholder="请选择向下"
          @change="handleRouteChange($event, 'down')"
        >
          <el-option
            v-for="item of getOptions()"
            :key="item.id"
            :label="item.id"
            :value="item.id"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import mixin from '@/views/editor/mixin.js'
  export default {
    name: 'ButtonRoute',
    mixins: [mixin],
    data() {
      return {
        route: null,
        root: {
          route: {
            left: '',
            right: '',
            up: '',
            down: '',
          },
          doms: [],
        },
      }
    },
    computed: {
      doms() {
        return this.root.doms
      },
      dom() {
        return this.root.dom
      },
    },
    watch: {
      dom(newDom) {
        if (!newDom) {
          this.route = null
          return
        }
        if (newDom.type === 'button') {
          this.route = this.root.routes[newDom.id]
        }
      },
    },
    methods: {
      getOptions() {
        return this.doms.filter((item) => {
          return item.id !== this.dom.id && item.type === 'button'
        })
      },
      handleRouteChange(value, dir) {
        this.$set(this.route, dir, value)
      },
    },
  }
</script>

<style scoped>
  .button-route >>> .el-form-item--small.el-form-item {
    margin: 0 8px;
  }

  .button-route >>> .el-form-item__label {
    color: #fff;
  }
</style>
